<template>
  <div class="search-container">
    <el-form :inline="true" size="mini">
      <el-form-item v-for="(item, index) in searchFormArrF" :key="index" :label="item.type == 'checkbox' ? '' : item.fieldName" :style="formItemStyle(item)">
        <!-- ipnut -->
        <el-input v-if="item.type == 'input'" :type="item.NameType" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" style="width: 300px" @keyup.native="handleKeyUp"></el-input>
        <div class="line" v-else-if="item.type === 'inputRange'">
          <el-input :type="item.NameType" v-model.trim="fieldArr[item.field][0]" :placeholder="item.placeholder" style="width: 150px" @keyup.native="handleKeyUp"></el-input>
          -
          <el-input :type="item.NameType" v-model.trim="fieldArr[item.field][1]" :placeholder="item.placeholder" style="width: 150px" @keyup.native="handleKeyUp"></el-input>
        </div>
        <el-input v-else-if="item.type == 'inputSearch'" v-model.trim="fieldArr[item.field]" :placeholder="item.placeholder" :type="item.NameType" style="width: 350px" class="input-with-select" @keyup.native="handleKeyUp">
          <el-button slot="append" type="primary" @click="submitForm()"><i class="el-icon-search" style="margin-right: 5px"></i>查询</el-button>
        </el-input>
        <!-- select -->
        <el-select
          v-else-if="item.type == 'select'"
          v-model="fieldArr[item.field]"
          :placeholder="item.placeholder"
          :clearable="item.clearable === false ? false : true"
          :multiple="item.multiple || false"
          :filterable="item.filterable || false"
          collapse-tags
          :style="`width: ${item.width}px` || 'width: 150px;'"
          @change="selectChange(item)"
        >
          <el-option v-for="(itemOption, index) in item.option" :label="itemOption.label" :value="itemOption.value" :key="index"></el-option>
        </el-select>
        <!--任意时间范围-->
        <el-date-picker
          v-else-if="item.type == 'timePicker'"
          v-model="fieldArr[item.field]"
          :type="item.timeType || 'datetimerange'"
          :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          style="width: 300px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timePicker"
        >
        </el-date-picker>
        <!-- 级联选择器 -->
        <el-cascader v-else-if="item.type == 'cascader'" v-model="fieldArr[item.field]" clearable :options="item.option" collapse-tags :props="item.props" @change="submitForm('cascader', $event, item.props)" @click.native="handleCascaderClick"></el-cascader>
        <!-- 多选框 -->
        <el-checkbox v-else-if="item.type == 'checkbox'" v-model="fieldArr[item.field]" @change="submitForm">{{ item.fieldName }}</el-checkbox>
        <!-- 单选框组 -->
        <el-radio-group v-else-if="item.type == 'radioGroup'" v-model="fieldArr[item.field]" @change="submitForm">
          <el-radio v-for="itemOption in item.option" :key="itemOption.value" :label="itemOption.value">{{ itemOption.label }}</el-radio>
        </el-radio-group>
        <!-- 多选框组 -->
        <el-checkbox-group v-else-if="item.type == 'checkboxGroup'" v-model="fieldArr[item.field]" @change="submitForm">
          <el-checkbox v-for="itemOption in item.option" :key="itemOption.value" :label="itemOption.value">{{ itemOption.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-noColor" @click="submitForm">查询</el-button>
        <el-button class="el-noColor" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'searchui',
  props: ['searchFormArr'],
  data() {
    return {
      fieldArr: {},
      cascaderItem: null,
    }
  },
  computed: {
    searchFormArrF() {
      if (!this.searchFormArr) {
        return []
      }
      return this.searchFormArr.filter((item) => item.hidden !== true)
    },
  },
  created() {
    this.setDefault()
  },
  methods: {
    formItemStyle(item) {
      let style = {}
      if (item.width) {
        style.width = item.width
      }
      return style
    },
    // 表单默认值
    setDefault() {
      this.searchFormArr.forEach((item) => {
        if (item.default !== undefined) {
          if (Array.isArray(item.default)) {
            this.$set(this.fieldArr, item.field, [...item.default])
          } else {
            this.$set(this.fieldArr, item.field, item.default)
          }
        } else {
          this.$set(this.fieldArr, item.field, '')
        }
      })
    },
    // 搜索按钮
    submitForm(type, value, props) {
      if (type === 'cascader' && value.length > 0 && props.multiple !== 'true') {
        $(this.cascaderItem).trigger('click')
      }
      this.$emit('searchParma', this.fieldArr)
    },
    handleCascaderClick(e) {
      this.cascaderItem = e.target
    },
    // 重置
    resetForm() {
      this.setDefault()
      this.$emit('resetForm')
      this.$emit('searchParma', this.fieldArr)
    },
    // 下拉选框
    selectChange(item) {
      this.$emit('change', { item, fieldArr: this.fieldArr })
      this.$emit('searchParma', this.fieldArr)
    },
    // 级联选择
    handleCascaderChange(item) {
      this.$emit('change', item, this.fieldArr)
      this.$emit('searchParma', this.fieldArr)
    },
    // 时间范围
    timePicker() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 关闭弹窗清除表单
    resetFormClose() {
      this.fieldArr = {}
    },
    // 清除某项数据
    clearFormItem(key, defaultData) {
      if (defaultData || defaultData === 0) {
        this.fieldArr[key] = defaultData
      } else {
        this.fieldArr[key] = ''
      }
      this.$emit('searchParma', this.fieldArr)
    },
    setItemValue(list, search = true) {
      list.forEach((item) => {
        this.fieldArr[item.key] = item.value
      })
      if (search) {
        // 触发搜索
        this.$emit('searchParma', this.fieldArr)
      }
    },
    // 按回车键搜索
    handleKeyUp(event) {
      if (event.keyCode === 13) {
        this.submitForm()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form.el-form--inline {
  margin-top: -10px;
}
::v-deep .el-input-group__append {
  color: #fff;
  background-color: #5db42c;
  border-color: #5db42c;
}
::v-deep .el-form--inline .el-form-item {
  margin: 10px 30px 0 0;
}
::v-deep .el-checkbox-group {
  height: 28px !important;
}
</style>
